<template>
  <div class="table-container">
    <Operation @update="refreshTableData" class="operation-container" />

    <a-table
      :columns="columns"
      :loading="tableLoading"
      size="middle"
      :pagination="paginationProps"
      :data-source="pagination.items"
      :scroll="{ x: '1200px' }"
    >
      <template #full_name="text, row">
        <a @click.prevent="handlerDetails(row)">{{ text }}</a>
      </template>
      <template #action="text, row">
        <div class="actions-container">
          <a @click.prevent="handlerModify(row)">编辑</a>
          <a @click.prevent="handlerActive(row)">{{ row.active ? '停用' : '恢复' }}</a>
          <a @click.prevent="handlerDelete(row)">删除</a>
        </div>
      </template>
    </a-table>
  </div>
</template>
<script>
import { getGroups, changeActive, deleleGroup } from '@/api/flow/group'
import table from '@/utils/mixins/search/table'
import Operation from './Operation.vue'

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    width: 100,
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: '群组名称',
    dataIndex: 'full_name',
    scopedSlots: { customRender: 'full_name' },
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
  },
  // {
  //   title: '总人数',
  //   dataIndex: 'user_count',
  // },
  {
    title: '类型',
    dataIndex: 'org_type',
  },
  {
    title: '状态',
    dataIndex: 'active',
    customRender: (text, record, index) => text ? '使用中' : '禁用',
  },
  {
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
    scopedSlots: { customRender: 'action' },
  },
]

const data = []

export default {
  mixins: [table],

  components: {
    Operation,
  },

  data () {
    return {
      data,
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
    }
  },

  created () {
    this.tableHooksRequest()
  },

  computed: {
    tableParams () {
      const { per_page, page } = this.pagination
      return [per_page, page, this.tableArgs]
    },
  },

  methods: {
    async tableHooksRequest () {
      try {
        console.log(this.tableParams)
        const res = await this.getTableDatas(getGroups, this.tableParams)
        return res
      } catch (error) {
        throw new Error(error)
      }
    },

    // 详情
    handlerDetails ({ id: gid }) {
      this.$router.push({
        name: 'JurisdictionDetails',
        params: {
          gid,
        },
      })
    },

    // 编辑
    handlerModify ({ id: gid }) {
      this.$router.push({
        name: 'JurisdictionEdit',
        params: {
          gid,
        },
      })
    },

    // 改变群组状态
    async handlerActive (row) {
      try {
        await changeActive(row.id)

        this.tableHooksRequest()
      } catch (error) {
      }
    },

    // 删除当前群组
    async handlerDelete (row) {
      try {
        await deleleGroup(row.id)
        await this.refreshTableData()

        this.$notification.success({ message: '删除成功!' })
      } catch (error) {

      }
    },
  },
}
</script>

<style lang="scss" scoped>
.table-container {

  .actions-container {
    a {
      margin-left: $margin-base;
    }
  }
}

.operation-container {
  margin: $margin-sm 0;
}
</style>
